<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
    <title>Forms Review</title>
  </head>
  <style>
   .circle {
    background:#456BD9;
    width: 60px;
    height: 60px;
    border-radius: 30px;
   }
   .circle2 {
    width: 100px;
  height: 100px;
  background: #ffffff;
  border-radius: 50%;
  border: 60px solid #ffc107;
   }
   .no1{
    width: 0;
    height: 0;
    border-top: 100px solid rgb(160, 160, 160);
    border-left: 100px solid black; 
    border-bottom:100px solid green;
    border-right: 100px solid yellow;
   }
  </style>
  <body>
    <div id="content">
        <h1>CSS TEMPLATES using border radius</h1>
        <div class="circle">Blue</div>
        <div class="circle2"><span class="text">TRIANGLE</span></div>
        <div class="no1">Red</div>
      </div>  
  </body>
</html>